<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/class.css" />
    <script src="./utils/js/index.min.js"></script>
    <title>分类</title>
  </head>
  <body>
    <header>
      <!-- 导航栏 -->
      <nav class="wrapper">
        <!-- 返回按钮 -->
        <a href="./index.html"> <button>Back</button></a>
        <!-- 标题 -->
        <h4>分类</h4>
        <!-- 城市 -->
        <div class="city">
          <select name="城市" id="city">
            <option value="广州市" checked="checked">广州市</option>
            <option value="深圳市">深圳市</option>
            <option value="上海市">上海市</option>
            <option value="北京市">北京市</option>
          </select>
          <i class="iconfont icon-xiangxia"></i>
        </div>
      </nav>
    </header>

    <!-- 分类主体内容 -->
    <main class="wrapper">
      <!-- 分类框 -->
      <div class="kind_select">
        <ul>
          <li>
            <a href="javascript::">
              <img src="./images/class/图层 1.png" />
              <span>美食</span>
            </a>
          </li>
          <li>
            <a href="javascript::">
              <img src="./images/class/图层 3.png" />
              <span>电影</span>
            </a>
          </li>
          <li>
            <a href="javascript::">
              <img src="./images/class/图层 4.png" />
              <span>运动</span>
            </a>
          </li>
          <li>
            <a href="javascript::">
              <img src="./images/class/图层 5.png" />
              <span>唱歌</span>
            </a>
          </li>
        </ul>
        <!-- 进度条 -->
        <div class="progress">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

      <!-- 分类内容区 -->
      <!-- 美食类 -->
      <div class="food">
        <!-- 标题 -->
        <div class="label">
          <div class="left">
            <img src="./images/class/图层 9.png" />
            <span>美食类</span>
          </div>
          <div class="right">
            <a href="javascript:;">
              <span>更多</span><i class="iconfont icon-a-xingzhuang4fuben"></i
            ></a>
          </div>
        </div>
        <!-- 内容 -->
        <div class="content">
          <img src="./images/class/图层 10.png" />
          <img src="./images/class/图层 11.png" />
          <img src="./images/class/图层 12.png" />
          <img src="./images/class/图层 13.png" />
        </div>
      </div>

      <!-- 运动类 -->
      <div class="sport">
        <!-- 标题 -->
        <div class="label">
          <div class="left">
            <img src="./images/class/图层 7.png" />
            <span>运动类</span>
          </div>
          <div class="right">
            <a href="javascript:;">
              <span>更多</span><i class="iconfont icon-a-xingzhuang4fuben"></i
            ></a>
          </div>
        </div>
        <!-- 内容 -->
        <div class="content">
          <img src="./images/class/图层 14.png" />
          <img src="./images/class/图层 15.png" />
          <img src="./images/class/图层 16.png" />
          <img src="./images/class/图层 17.png" />
        </div>
      </div>

      <!-- 电影类 -->
      <div class="movie">
        <!-- 标题 -->
        <div class="label">
          <div class="left">
            <img src="./images/class/图层 8.png" />
            <span>电影类</span>
          </div>
          <div class="right">
            <a href="javascript:;">
              <span>更多</span><i class="iconfont icon-a-xingzhuang4fuben"></i
            ></a>
          </div>
        </div>
        <!-- 内容 -->
        <div class="content">
          <img src="./images/class/图层 18.png" />
          <img src="./images/class/图层 19.png" />
          <img src="./images/class/图层 18.png" />
          <img src="./images/class/图层 19.png" />
        </div>
      </div>

      <!-- 电影类 -->
      <div class="movie">
        <!-- 标题 -->
        <div class="label">
          <div class="left">
            <img src="./images/class/图层 8.png" />
            <span>电影类</span>
          </div>
          <div class="right">
            <a href="javascript:;">
              <span>更多</span><i class="iconfont icon-a-xingzhuang4fuben"></i
            ></a>
          </div>
        </div>
        <!-- 内容 -->
        <div class="content">
          <img src="./images/class/图层 18.png" />
          <img src="./images/class/图层 19.png" />
          <img src="./images/class/图层 18.png" />
          <img src="./images/class/图层 19.png" />
        </div>
      </div>

      <!-- 电影类 -->
      <div class="movie">
        <!-- 标题 -->
        <div class="label">
          <div class="left">
            <img src="./images/class/图层 8.png" />
            <span>电影类</span>
          </div>
          <div class="right">
            <a href="javascript:;">
              <span>更多</span><i class="iconfont icon-a-xingzhuang4fuben"></i
            ></a>
          </div>
        </div>
        <!-- 内容 -->
        <div class="content">
          <img src="./images/class/图层 18.png" />
          <img src="./images/class/图层 19.png" />
          <img src="./images/class/图层 18.png" />
          <img src="./images/class/图层 19.png" />
        </div>
      </div>
    </main>

    <footer>
      <ul>
        <li>
          <a href="./index.html"
            ><i class="iconfont icon-shouye footer_icon"></i
            ><span>首页</span></a
          >
        </li>
        <li>
          <a href="./class.html">
            <i class="iconfont icon-fenlei footer_icon"></i><span>分类</span>
          </a>
        </li>
        <li>
          <a href="./find.html">
            <i class="iconfont icon-a-faxianzhinanzhen footer_icon"></i
            ><span>发现</span>
          </a>
        </li>
        <li>
          <a href="./home.html">
            <i class="iconfont icon-wode footer_icon"></i><span>我的</span>
          </a>
        </li>
      </ul>
    </footer>
  </body>
</html>
